
<!--同步显示是ctrl+shift+v-->
<!--href:超文本引用——hypertext reference-->
<!--这是另一个注释-->
<!--不能在style部分写注释是怎么回事，格式不能正常显示，删除注释语句后就好了-->
<!DOCTYPE html>
<!---->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>      
        <style>  
        :root{
            background-color: aqua;
            font:bolder 25px 黑体;
        }
        .rabbit{
            width: 200px;
            height: 200px;
            float: left ;
            transform-origin:left;
            animation: rot 1s linear  1;
            transform: perspective(200px)
                           rotateX(20deg)
                           rotateY(40deg)
                          
            
        }
        .rabbit2{
            width: 30px;
            vertical-align: middle;
            animation: rot 1s linear 1;
        }
        h1{
            width:400px;
            text-align: center;
        }
        p{
            font-size: 20px;
            font-family: 'Times New Roman', Times, serif;
            overflow: hidden;
            word-wrap: break-word;
            letter-spacing: 3px;
            word-spacing: 6px;
            font-variant:unicase;
            /*white-space: nowrap;可以控制不换行*/
        }
        .container0{
            width: 20px;
            height: 30px;
        }
        .container1{
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            border-radius: 10px;
            border-width: 5px;
            box-shadow: 10px -10px 3px 0px gray; 
            margin-bottom: 10px;
            overflow: hidden;

        }
        .container2{
            width: 400px;
            height: 500px;
            border: 1px solid rgb(73, 168, 236);
            border-width: 3px;
            border-radius: 10px;
            box-sizing:content-box;
            display: flex;               
            flex-wrap: wrap;
            align-items: stretch;
            
        }
        .position{
            position: absolute;
            top:400px;
            left: 28px;
        }
        /*.container3{
            background-color: white;
            z-index: 5;
            width: 400px;
            height: 500px;
            border: 1px solid orange;
            border-radius: 10px;
            border-width: 5px;
            box-sizing: border-box;   
            box-shadow: 10px -10px 3px 0px gray; 
            display: grid;   
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: "header header"
                                    "aside main"
                                    "footer footer";
            grid-gap:10px 30px;
            justify-items: stretch;
            align-items: stretch;
        }*/
        .slj{
            position: absolute;
            top: 300px;
            left: 50%;
            z-index: 5;
            transform-origin: center;
            animation: rot 1s linea  infinite;

        }
            .a1{
                width: 100px;
                border-radius: 10px;                               
                font: 30px 宋体;   
                text-align: center;
                align-content: center;
                flex-grow: 1;

            }
            @keyframes rot{
                from{
                    transform-origin:right;
                    transform:rotate(0deg);
                }
                
                to{
                    transform-origin:center;
                    transform:rotate(360deg)
                                scale(0.1)

                }
            }
            #A{
                background-color:lightpink;
                transform-origin:left top;
                transform:rotate(0deg);
                z-index: auto;
                animation:rot 2s normal linear 0;
                grid-area: header
            }
            #B{
                background-color: lightblue;
                z-index: 2;
                grid-area: aside;
                
            }
            #C{
                background-color: rgb(142, 252, 142);
                z-index: 4;
                grid-area: main;
            }
            #D{
                background-color: rgba(199, 199, 78, 0.664);
                z-index: 5; 
                grid-area: footer;
            }
            #E{
                background-color: rgba(146, 78, 199, 0.664);
                z-index: 10;
            }
            #F{
                background-color: rgba(129, 188, 57, 0.664);
                z-index: 5;

            }
            #F:hover{
                background-color: red;
                box-shadow: 11px 11px 11px black;
                transform: translate(10px,10px)
                            rotate(90deg);
                animation:rot 2s linear reverse 1;
            }
            #G{
                background-color: rgba(9, 247, 191, 0.664);
                z-index: 5;
                filter: blur(3px); /*高斯模糊效果*/
            }
            #H{
                background-color: rgba(247, 147, 228, 0.664);
                z-index: 12;

            }
            #I{
                background-color: rgba(252, 17, 44, 0.664);
                z-index: 5;
            }
            #J{
                background-color: rgba(28, 61, 132, 0.664);
                z-index: 5;
            }
            .a2{
                width: 100%;
                background-color: aquamarine;
                border-top:1px  solid red ;
                border-bottom: 1px solid red;
                font: bold 20px 仿宋;
                color: green;
                text-align: center;
            }
            table{
                background-color: aquamarine;
                border: 1px solid black;
                z-index: 10;
                width: 50%;
                height: 50%;
                border-collapse: collapse;
                

            }   
            th{
                border: 1px solid black;
                font-size: 18px;
                text-align: left;
                vertical-align: top;
                white-space: nowrap;
                overflow: visible;
                text-overflow:ellipsis;
            }
            table{
            }
            tr:nth-child(1){
                background-color: pink;
            }
            td:nth-child(odd){
                background-color: lightblue;
            }
            td{
                border-collapse: collapse;
                border: 1px solid black;
            }
            .words{
                width: auto;
                height: 200px;
                font-size: 40px;
                border: 1px solid blue;  
                background-color: antiquewhite;
                text-shadow: 2px 2px 2px blue;              
                text-indent: 2em;
                word-wrap: break-word;
                text-overflow: clip;
                overflow: hidden;
            }
            .a3{
                border: 1px solid pink;
                width: 15px;
                height: 15px;
                display: inline-block;
                vertical-align: sub;
                background-color: lightpink;           
                
            }
            nav{
                display: table;
                width: 100%;
                background: lightblue;
                
            }
            nav a{
                display: table-cell;
                text-align: center;
                color: blue;
            }
        </style>
    </head>
<body>
    <div class="container0">

    </div>
    <section class="container1">   
    <h1>行盒内摆放练习</h1>

    <img class="rabbit" src="pictures/红兔.png">
    <p>这是一个行盒内的摆放练习<img class="rabbit2" src="pictures/红兔.png">这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习这是一个行盒内的摆放练习abcdefghi jklmnopqrstuvwxy zabcdefghijklmnopqrsnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmtuvwxyzabcdefghijklmnopqrstuvwxyuz</p>
</section>
<h1>Flex Box练习</h1>
<div class="container2">
    <span class="position">container2</span>    
    <div class="a1" id="A">A</div>
    <div class="a1" id="B">B</div>
    <div class="a1" id="C">C</div>
    <div class="a1" id="D">D</div>
    <div class="a1" id="E">E</div>
    <div class="a1" id="F">F</div>
    <div class="a1" id="G">G</div>
    <div class="a1" id="H">H</div>
    <div class="a1" id="I">I</div>
    <div class="a1" id="J">J</div>
</div>
<div class="slj"><img src="pictures/手里剑.png" alt=""></div>
<h1>Grid网格练习</h1>
<div class="container3">    
    <div class="a1" id="A">A</div>
    <div class="a1" id="B">B</div>
    <div class="a1" id="C">C</div>
    <div class="a1" id="D">D</div>
    <div class="a1" id="E">E</div>
    <div class="a1" id="F">F</div>
    <div class="a1" id="G">G</div>
    <div class="a1" id="H">H</div>
    <div class="a1" id="I">I</div>
</div>

<table >
    <th>一个行盒与块盒</th>
    <th>二个行盒与块盒</th>
    <th>三个行盒与块盒</th>
    <tr>
        <td>一</td>
        <td>二</td>
        <td>三</td>
    </tr>
    <tr>
        <td>四</td>
        <td>五</td>
        <td>六</td>
    </tr>

</table>
<nav>
    <a href="#">Home</a>
    <a href="#">Blog</a>
    <a href="#">Links</a>
    <a href="#">about</a>
</nav>
<div class="a2" >隔离</div>
    <div class="words">这是一个行盒与块盒的测试plSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSxplSx
        <div class="a3"></div>
        <input type="text" value="1234556612312abcabc3123123123123123112323123">
    </div>
<canvas width="500px" height="500px" style="border: 1px solid #c3c3c3; background-color: #c3c3c3;"><span>显示一行字</span></canvas>
</body>
</html>